<template>
  <div>
    <ButtonGroup>
      <Button type='primary' @click='modal=true'>添加</Button>
      <Button type='error' >删除多个</Button>
    </ButtonGroup>
    <Input v-model='data.name'>
      <Button slot='append' icon='ios-search' @click='search'>添加</Button>
    </Input>
    <Modal 
    v-model='modal'
    title='数据信息'
    @on-ok='ok'
    @on-cancel='cancel'>
    <Form ref='formValidate' :model='formValidate' :rules='ruleValidate'>
      <FormItem label='Title' prop='title'>
        <Input v-model='formValidate.title' placeholder='Enter your title'></Input>
      </FormItem>
       <FormItem label='分类Id' prop='cateId'>
        <Input v-model='formValidate.cateId' placeholder='Enter your cateId'></Input>
      </FormItem>
        <FormItem>
           <Button type='primary' @click="handleSubmit('formValidate')">submit</Button>
            <Button type='ghost' @click="handleReset('formValidate')" style="margin-left:8px">添加</Button>
      </FormItem>
    </Form>
    </Modal>

      <Tree :data="treeData"></Tree>

      <Table border :columns='columns' :data='list'></Table>
      <Page :total='data.total'
      @on-change='onChangePage'
      @on-page-size-change='onPageSizeChange'
      size='small' show-elevator show-sizer></Page>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        treeData:[],
        columns: [
                    {
                      type:'selection',
                      width:60,
                      align:'center'
                    },
                    {
                        title: 'Title',
                        key: 'title',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                list:[],
                data:{
                  cateId:0,
                  name:'',
                  total:0,
                  page:1,
                  limit:10
                }
      }
    },
    created(){
      this.getTree();
      this.getData();
    },
    methods:{
      getTree(){
        this.$http.post(`http://10.31.153.92:3000/cate/list/0`)
        .then((response)=>{
          this.treeData=response.data;
        })
      },
      getData(){
        this.$http({
          method:'post',
          url:`http://10.31.153.92:3000/news/list`,
          data:this.data
        }).then(res=>{
          this.list=res.data.docs;
          this.data.total=res.data.total;
        })
      },
      show(index){
        this.$Modal.info({
          title:'User Info',
          content:`Name:${this.data[index].name}<br>Age:${this.data}`
        })
      },
      remove(params){
         this.$Modal.confirm({
          title:'Title',
          content:`<p>确认删除</p>`,
          onOk:()=>{
            this.$http({
              method:'delete',
              url:`http://10.31.153.92:3000/news/data/${params.row._id}`
            }).then(res=>{
              this.$Message.info('Clicked ok');
              this.getData();
            })
          },
          onCancel:()=>{
            this.$Message.info('Clicked cancel');
          }

        });
      },
      ok(){
        this.$Message.info('Clicked ok');
      },
      cancel(){
        this.$Message.info('Clicked cancel');
      },
      handleSubmit(name){
        this.$refs[name].validate((valid)=>{
          if(valid){
            this.$http({
              method:'post',
              url:'http://10.31.153.92:3000/news/data',
              data:this.formValidata
            }).then(res=>{
              this.$Message.success('Success!');
              Object.assign(this.$data.formValidata,
              this.$options.data().formValidata);
              this.modal=false;
              this.getData();
            })
          }else{
            this.$Message.error('Fail!');
          }
        })
      },
      hanleReset(name){
        this.$refs[name].resetFields();
      },
      onCChangePage(page){
        this.data.page=page;
        this.$http({
          method:'post',
          url:'http://10.31.153.92:3000/news/list',
          data:this.data
        }).then(res=>{
          this.list=res.data.docs;
          this.data.total=res.data.total;
        })
      },
      onPageSizeChange(pageSize){
        this.data.limit=pageSize;
        this.getData();
      },
      search(){
        this.getData();
      }
    }
  }

</script>